<template>
	<div class="list-comment">
		<div class="box-shadow">
			<ul>
				<li v-for="(item, index) in list"
					:key="index">
					<div class="box">
						<h2>
							<nuxt-link :to="{name: 'detail-id',params: {id: item.id}}">
								{{ item.title }}
							</nuxt-link>
						</h2>
						<div class="info">
							<!--<div class="thumbnail">-->
							<!--	<img :src="item.thumbnail"-->
							<!--		 alt="">-->
							<!--</div>-->
							<div class="intro">
								<p>{{ item.content }}</p>
								<div class="intro-bottom">
									<div class="type-time">
										<nuxt-link :to="{name: 'list-name',params: {name: item.cname}}">
											<span class="type">
												{{ item.cname }}
											</span>
										</nuxt-link>
										<span class="time">{{ item.created_time }}</span>
									</div>
									<div class="browse-comments">
										<span class="browse">浏览{{ item.views }}</span>
										<span class="comments">评论{{ item.comments }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: 'index',
	props: {
		list: {
			type: Array
		}
	}
}
</script>

<style scoped lang="less">
.list-comment {
	padding: 10px;

	ul {
		border-radius: 5px;

		li {
			padding: 20px 20px 0 20px;
			overflow: hidden;
			background-color: #fff;

			&:last-child {
				.box {
					border: 0;
				}
			}

			.box {
				padding-bottom: 20px;
				border-bottom: 1px solid #e9e9e9;

				h2 {
					font-size: 22px;
					font-weight: normal;
					color: #333;
				}

				.info {
					//margin-top: 20px;
					overflow: hidden;

					.thumbnail {
						width: 210px;
						height: 150px;
						float: left;
					}

					.intro {
						//width: 500px;
						height: 70px;
						//float: right;
						position: relative;

						p {
							color: #666;
							line-height: 30px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.intro-bottom {
							font-size: 14px;
							width: 100%;
							line-height: 40px;
							overflow: hidden;
							position: absolute;
							bottom: 0;

							.type-time {
								float: left;

								.type {
									margin-right: 10px;
									padding: 5px;
									color: #409eff;

									&:hover {
										color: #fff;
										background-color: #409eff;
									}
								}

								.time {
									font-size: 14px;
									color: #999;
								}
							}

							.browse-comments {
								color: #999;
								float: right;

								span {
									padding: 0 10px;
								}

								.browse {
									position: relative;

									&:before {
										content: '';
										width: 1px;
										height: 15px;
										margin-top: -7.5px;
										background-color: #e9e9e9;
										position: absolute;
										top: 50%;
										right: 0px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
